<template>
  <div class="statistics">
    <el-button>全屏</el-button>
    <div class="welcome">
      <div class="top">
        <!-- left -->
        <div class="article">
          <!-- top -->
          <div class="article__user">
            <div class="article__user--avatar">
              <el-avatar :size="100" :src="userInfo.headimgurl"></el-avatar>
            </div>

            <div class="article__user--userInfo">
              <p class="userInfo--nickname">{{ userInfo.nickname }}</p>
              <p class="userInfo--position">web开发工程师</p>
            </div>
            <div class="article__user--setting">
              <el-button @click="jumpToMine">点击修改</el-button>
            </div>
          </div>
          <!-- bottom -->
          <div class="article__date">
            <p class="article__date--title">日历</p>
            <el-calendar v-model="dateValue"> </el-calendar>
          </div>
        </div>
        <!-- right -->
        <div class="aside">
          <!-- top -->
          <div class="aside__message">
            <div class="left">
              <div class="hello">hello</div>
              <div class="weather">weather</div>
            </div>
            <div class="right">通知公告</div>
          </div>
          <!-- bottom -->
          <div class="aside__task">
            <div class="task--general">
              <h4>任务概况</h4>
              <div
                class="ecahrtsGeneral"
                ref="echartsGeneral"
                style="height: 400px"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom-achieve">
        <div class="bottom-achieve-left">
          <div
            class="achieveChart"
            ref="achieveChart"
            style="height: 600px"
          ></div>
        </div>
        <div class="bottom-achieve-right">right</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import * as api from "@/api/user";
import * as echarts from "echarts";
console.log(echarts);
export default {
  data() {
    return {
      dateValue: new Date(),
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  meta: {
    title: "sjtj",
    icon: "iconfont icon-shuju2",
  },
  methods: {
    jumpToMine() {
      this.$router.push({ name: "mine" });
    },
  },
  mounted() {
    // 任务概况
    let generalOption = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        x: "50%",
        top: "50%",
        data: ["A", "B", "C", "D", "E"],
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center", //让数据提示在圆环中间
            formatter: "{d}%",
            textStyle: {
              fontSize: "20",
              fontWeight: "bolder",
            },
          },
          emphasis: {
            disabled: false,
            //强调 鼠标移入到饼图上会对该数据进行强调
            label: {
              show: true,
              position: "outer",
              fontSize: "15",
              fontWeight: "bold",
              color: "red",
            },
          },
          labelLine: {
            show: true,
          },
          data: [
            { value: 335, name: "A" },
            { value: 310, name: "B" },
            { value: 234, name: "C" },
            { value: 135, name: "D" },
            { value: 1548, name: "E" },
          ],
        },
      ],
    };
    let generalChart = echarts.init(this.$refs.echartsGeneral);
    api.taskDataApi().then((res) => {
      //console.log(res);
      generalOption.series[0].data = res.data.data;
      generalOption.legend.data = res.data.data;
      //console.log(generalOption);
      generalChart.setOption(generalOption);
    });
    window.onresize = function () {
      generalChart.resize();
    };

    //阶段学习情况 achieve
    let achieveOption = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true,
        },
      ],
    };
    let achieveChart = echarts.init(this.$refs.achieveChart);
    api.lineDataApi().then((res) => {
      let {
        data: { data },
      } = res;
      let newData = [];
      data.forEach((item) => {
        newData.push(item.name);
      });
      let newData2 = [];
      data.forEach((item) => {
        newData2.push(item.rate);
      });
      achieveOption.xAxis.data = newData;
      achieveOption.series[0].data = newData2;
      achieveChart.setOption(achieveOption);
    });

    //期望课程 expect
  },
};
</script>
<style lang="less" scoped>
.welcome {
  background-image: linear-gradient(135deg, #4c67ff, #5635df);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 7;
  display: flex;
  justify-content: space-between;
  .article {
    flex: 3;
    display: flex;
    flex-direction: column;
    .article__user {
      flex: 4;
      background: #fff;
      margin: 8px;
      border-radius: 10px;
      margin-bottom: 0;
      margin-right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .article__user--avatar {
        flex: 3;
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .article__user--userInfo {
        flex: 3;
        /deep/ .userInfo--nickname {
          line-height: 32px;
        }
        /deep/ .userInfo--position {
          line-height: 32px;
        }
      }
      .article__user--setting {
        flex: 1;
      }
    }
    .article__date {
      flex: 6;
      background: #fff;
      margin: 8px;
      border-radius: 10px;
      margin-right: 0;
      .article__date--title {
        line-height: 16px;
        background-color: green;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 10px 0;
      }
      /deep/ .el-calendar__header {
        line-height: 16px;
      }
      /deep/ .el-calendar-table thead th {
        line-height: 16px;
      }
      /deep/ .el-calendar-table .el-calendar-day {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        span {
          line-height: 16px;
        }
      }
    }
  }
  .aside {
    flex: 7;
    display: flex;
    flex-direction: column;
    .aside__message {
      flex: 5;
      display: flex;
      justify-content: space-between;
      .left {
        flex: 4;
        display: flex;
        flex-direction: column;
        .hello {
          flex: 5;
          background: #fff;
          margin: 8px;
          border-radius: 10px;
          margin-bottom: 0;
          margin-right: 0;
        }
        .weather {
          flex: 5;
          background: #fff;
          margin: 8px;
          border-radius: 10px;
          margin-bottom: 0;
          margin-right: 0;
        }
      }
      .right {
        flex: 6;
        background: #fff;
        margin: 8px;
        border-radius: 10px;
        margin-bottom: 0;
      }
    }
    .aside__task {
      flex: 5;
      background: #fff;
      margin: 8px;
      border-radius: 10px;
    }
  }
}

.bottom-achieve {
  flex: 3;
  display: flex;
  justify-content: space-between;
  .bottom-achieve-left {
    flex: 5;
    background: #fff;
    border-top-left-radius: 10px;
  }
  .bottom-achieve-right {
    flex: 5;
    background: #fff;
    border-top-right-radius: 10px;
  }
}
</style>